<template>
	<view class="orderList">
		<view class="leftBorder">钓场：{{data.fish_place_name}}</view>
		<view class="leftBorder">场次：{{data.session_name}}</view>
		<view class="flex-start leftBorder">
			<view style="flex: 1;">日期：{{data.session_date}}</view>
			<view style="width: 30%;margin-left: 20rpx;">售票：<text class="red">{{data.get_tickets}}</text>/{{data.all_tickets}}</view>
			<view style="width: 8%;margin-left: 10rpx;"><uni-icons color="#D43030" type="download" size="18" @click="tableToExcel"></uni-icons></view>
		</view>
		<view class="flex-start query">
			<uni-easyinput suffixIcon="search" v-model="query.registrant_phone" placeholder="输入手机号查询" @iconClick="getList"></uni-easyinput>
			<uni-data-select
			      v-model="query.status_code"
			      :localdata="range"
				  placeholder="请选择订单状态"
			      @change="getList"
				  :clear="false"
			    ></uni-data-select>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y list">
			<view class="noneOrder" v-if="data.tickets_list.length==0">—— 暂无售票订单 ——</view>
			<view class="item" v-for="item in data.tickets_list">
				<view class="order">订单编号：{{item.order_number}}</view>
				<view class="order">下单时间：{{item.create_time}}</view>
				<view class="order" v-show="item.status==3">取消时间：{{item.quit_time}}</view>
				<view class="order" v-show="item.status==4">退票时间：{{item.quit_time}}</view>
				<view class="state">{{item.surplus}}</view>
				<view class="user flex-between">
					<view style="height: 90rpx;width: 90rpx;border-radius: 50%;overflow: hidden;">
						<image :src="item.picture" alt="" mode="widthFix" style="width: 90rpx;height: 90rpx;"></image>
					</view>
					<view style="flex: 1;margin-left: 20rpx;">
						<view>姓名：{{item.name}}</view>
						<view>手机号：{{item.registrant_phone}}</view>
					</view>
					<view style="width: 160rpx;text-align: right;">
						<view>{{item.original}}</view>
						<view>￥{{item.transaction_amount}}</view>
					</view>
				</view>
				<view class="user flex-between">
					<view style="flex: 1;">
						<view v-show="item.coupon">优惠券：</view>
						<view class="red">实付：</view>
					</view>
					<view style="width: 160rpx;text-align: right;">
						<view v-show="item.coupon">-{{item.coupon}}</view>
						<view class="red">￥{{item.amount}}</view>
					</view>
				</view>
				<view class="operation flex-end" v-if="item.is_ticket">
					<view @click="refundTicket(item)">退票申请通知</view>
				</view>
			</view>
			<view class="hasOrder" v-if="data.tickets_list.length>0">—— 没有更多订单 ——</view>
		</scroll-view>
	</view>
</template>

<script>
	import { get_ticket_order, post_refund_ticket } from '@/utils/fishNew/index.js'
	export default {
		data() {
			return {
				file: 'https://img.js.design/assets/avatarImg/Small64dc7cecd5a27071584095111701915503632.png',
				query:{
					status_code: 0,
					registrant_phone:'',
					session_id: null
				},
				range: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "拼团中" },
					{ value: 2, text: "拼团完成" },
					{ value: 3, text: "拼团取消" },
					{ value: 4, text: "已退票" },
				],
				data:{
					fish_place_name: '万顺缘垂钓俱乐部',
					session_name: '0729正钓鲫鱼7000斤',
					session_date: '2024-09-23',
					limit_applicant_num: 30,
					num: 12,
					tickets_list:[]
				}
			}
		},
		onLoad(query){
			this.query.session_id = query.id
			this.getList()
		},
		methods: {
			getList() {
				get_ticket_order(this.query).then(res=>{
					this.data = res.data
				})
			},
	
			// 导出excel
			tableToExcel() {
				// uni.navigateTo({
				// 	url: '/pages/fishTickets/orderList/exportExcel'
				// })
			},
			refundTicket(item){
				let that = this
				uni.showModal({
				    title: '用户申请退票，请确认！',
				    confirmText:'同意', //确定按钮的文字，默认为"确定"
				    cancelText:'不同意',//取消按钮的文字，默认为"取消"
				    showCancel:true,//是否显示取消按钮，默认为 true
					success: function (res) {
					    if (res.confirm) {
							post_refund_ticket({record_id:item.record_id,is_agree:1}).then(res=>{
								if(res.code==200){
									uni.showLoading({
										title: '退票成功！'
									})
									setTimeout(() => {
										uni.hideLoading()
										that.getList()
									}, 500)
								}
							})
						} else if (res.cancel) {
							post_refund_ticket({record_id:item.record_id,is_agree:0}).then(res=>{
								if(res.code==200){
									uni.showLoading({
										title: '已拒绝退票！'
									})
									setTimeout(() => {
										uni.hideLoading()
										that.getList()
									}, 500)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.orderList{
	.red{
		color: #D43030;
	}
	.leftBorder{
		border-left: 8rpx solid #D43030;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: 700;
		padding-left: 20rpx;
		margin: 20rpx 40rpx;
		font-size: 28rpx;
	}
	.query{
		height: 35px;
		line-height: 35px;
		margin: 20rpx 20rpx;
		:deep(.uni-easyinput__content){
			height: 35px;
		}
		
	}
	.list{
		height: calc(100vh - 260rpx - 35px);
		overflow-y: auto;
		background-color: #F4F4F4;
		padding: 20rpx 0;
		.noneOrder{
			text-align: center;
			padding-top: 40rpx;
			font-size: 24rpx;
			color: #999;
		}
		.hasOrder{
			text-align: center;
			// padding-bottom: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
		.item{
			padding: 20rpx 40rpx;
			position: relative;
			background-color: #fff;
			margin-bottom: 20rpx;
			box-shadow: 0px 2px 4px  rgba(51, 51, 51, 0.25);
			.state{
				position: absolute;
				right: 40rpx;
				top: 30rpx;
				color: #D43030;
				background-color: rgba(212, 48, 48, 0.2);
				font-size: 24rpx;
				padding: 6rpx 12rpx;
			}
			.order{
				font-size: 24rpx;
				line-height: 35rpx;
				color: rgba(51, 51, 51, 0.7);

			}
			.user{
				margin: 20rpx 0;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 1);
				line-height: 46rpx;
			}
			.operation{
				view{
					background-color: rgba(230, 16, 16, 1);
					color: #fff;
					width: 200rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
				}
			}
		}
	}

}
	:deep(.uni-modal){
		.uni-modal__title{
			font-size: 30rpx;
			padding-top: 20rpx;
		}
		.uni-modal__ft:after{
			border: none;
		}
		.uni-modal__ft{
			display: flex;
			justify-content: space-around;
			line-height: 60rpx;
			margin: 0 0 40rpx 0;
			border: none;
			.uni-modal__btn_default{
				width: 120rpx;
				background: rgba(229, 229, 229, 1);
				color: #333;
				font-size: 28rpx;
				flex: none;
			}
			.uni-modal__btn_primary{
				width: 120rpx;
				background: rgba(212, 48, 48, 1);
				color: #fff !important;
				font-size: 28rpx;
				flex: none;
			}
		}
	}
</style>
